<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from "vue";
import { TileProvider, useMap } from "@/hooks/useMap";
import { useHeatmap } from "@/hooks/useHeatmap";

const mapContainer = ref();
// 使用地图hooks
const { map, initMap, setView, loadTileLayer } = useMap(mapContainer, {
  tileType: "gaode",
  tileOptions: { type: "vector", layerOptions: {} }
});
const {
  config,
  heatmapVisible,
  toggleHeatmap,
  resetMap,
  create,
  update,
  updateConfig,
  destroy
} = useHeatmap(map);
const heatmapData = ref([]);
const heatmapLayer = ref();
const radius = ref();
const blur = ref();
// 北京地区范围
const BEIJING_BOUNDS = {
  minLat: 39.7,
  maxLat: 40.1,
  minLng: 116.1,
  maxLng: 116.7
};
// 生成随机数据
const generateRandomData = () => {
  const count = 50 + Math.floor(Math.random() * 50); // 50-100个随机点
  const newData = [];

  for (let i = 0; i < count; i++) {
    const lat =
      BEIJING_BOUNDS.minLat +
      Math.random() * (BEIJING_BOUNDS.maxLat - BEIJING_BOUNDS.minLat);
    const lng =
      BEIJING_BOUNDS.minLng +
      Math.random() * (BEIJING_BOUNDS.maxLng - BEIJING_BOUNDS.minLng);
    const value = 20 + Math.random() * 80; // 20-100之间的随机值

    newData.push({ lat, lng, value });
  }

  // 合并数据
  const temp = JSON.parse(JSON.stringify(heatmapData.value));
  heatmapData.value = [...temp, ...newData.map(item => ({ ...item }))];
  console.log("生成随机数据", heatmapData.value);
};
// 初始化数据（北京主要区域热点）
const initData = [
  { lat: 39.9042, lng: 116.4074, value: 100 }, // 天安门
  { lat: 39.9165, lng: 116.3972, value: 180 }, // 故宫
  { lat: 39.9962, lng: 116.3427, value: 160 }, // 颐和园
  { lat: 39.9823, lng: 116.3162, value: 3070 }, // 圆明园
  { lat: 39.9092, lng: 116.4422, value: 390 }, // 北京CBD
  { lat: 39.9507, lng: 116.4372, value: 75 }, // 鸟巢
  { lat: 39.8811, lng: 116.4067, value: 65 }, // 天坛
  { lat: 39.9472, lng: 116.3574, value: 50 }, // 北京动物园
  { lat: 39.9959, lng: 116.3567, value: 55 }, // 清华大学
  { lat: 39.9898, lng: 116.3059, value: 45 } // 北京大学
];
// 动态切换瓦片
function switchTile(type: TileProvider) {
  loadTileLayer(type, {
    // 不同瓦片类型的参数
  });
}
watch(
  () => JSON.parse(JSON.stringify(heatmapData.value)),
  newData => {
    console.log("heatmapData变化", newData);
    if (heatmapLayer.value) {
      update(heatmapLayer.value, newData);
    }
  },
  { deep: true }
);
// 监听配置变化
watch(radius, newVal => {
  if (heatmapLayer.value) {
    updateConfig(heatmapLayer.value, { radius: newVal });
  }
});

watch(blur, newVal => {
  if (heatmapLayer.value) {
    updateConfig(heatmapLayer.value, { blur: newVal });
  }
});
onMounted(async () => {
  await initMap();
  heatmapLayer.value = await create(initData);
});
onUnmounted(() => {
  // 清理地图资源
  if (map) {
    destroy();
  }
});
</script>

<template>
  <div class="">
    <!-- 控制面板 -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-6 flex flex-wrap gap-4">
      <div class="flex items-center">
        <div
          class="bg-primary cursor-pointer hover:bg-primary/90 text-white px-4 py-2 rounded flex items-center transition-all"
          @click="toggleHeatmap"
        >
          <i :class="`fa fa-${heatmapVisible ? 'eye-slash' : 'eye'} mr-2`" />
          {{ heatmapVisible ? "隐藏" : "显示" }}热力图
        </div>
      </div>

      <div class="flex items-center">
        <label class="text-gray-700 mr-2">热力点半径:</label>
        <input
          v-model.number="radius"
          type="range"
          min="5"
          max="50"
          class="w-40 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
        />
        <span class="ml-2 text-gray-700">{{ radius }}</span>
      </div>

      <div class="flex items-center">
        <label class="text-gray-700 mr-2">模糊度:</label>
        <input
          v-model.number="blur"
          type="range"
          min="5"
          max="50"
          class="w-40 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
        />
        <span class="ml-2 text-gray-700">{{ blur }}</span>
      </div>

      <div class="flex items-center">
        <div
          class="bg-amber-600 cursor-pointer hover:bg-secondary/90 text-white px-4 py-2 rounded flex items-center transition-all"
          @click="generateRandomData"
        >
          <i class="fa fa-random mr-2" />生成随机数据
        </div>
      </div>

      <div class="flex items-center">
        <div
          class="bg-blue-600 cursor-pointer hover:bg-accent/90 text-white px-4 py-2 rounded flex items-center transition-all"
          @click="resetMap"
        >
          <i class="fa fa-refresh mr-2" />重置地图
        </div>
      </div>

      <div class="ml-auto flex items-center">
        <span class="text-gray-700 mr-2">数据点数量:</span>
        <span class="font-semibold text-accent">{{ heatmapData.length }}</span>
      </div>
    </div>
    <div ref="mapContainer" style="height: calc(100vh - 255px)" />
  </div>
</template>
